// var btn = document.getElementsByClassName('.main-div4');

var btn1 = document.querySelector('.main-div4');
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var btn2 = document.querySelector('.content');
var wenjuanNum =0; //记录问卷份数

// document.addEventListener('click','')
btn1.onclick=function() {
    // alert('哈哈');
    box1.style.display = 'none';
    box2.style.display = 'block';
    list.style.display='none';
}
btn2.onclick=function() {
    box2.style.display='none';
    box3.style.display='block';
}
var box3 = document.querySelector('.box3');
var btn3 = document.querySelector('.baoCun');
var list = document.querySelector('.list');

//保存问卷按钮
var form = document.querySelector('.form');
var numberDelete=0; //表示删除的是第几个问卷

btn3.onclick=function() {
    wenjuanNum++;
    box3.style.display='none';
    box1.style.display='block';
    list.style.display='block';
    var newForm = document.createElement('form');
    newForm.className='form';
    var radio = document.createElement('input');
    radio.type='checkbox';
    radio.className='checkbox1';
    newForm.appendChild(radio);
    var span1 = document.createElement('span');
    span1.className='wenjuanCount'
    span1.innerHTML = '这是我的第'+wenjuanNum+'份调查问卷';
    newForm.appendChild(span1);
    var span2 = document.createElement('span');
    span2.innerHTML = '2023-1-2';
    newForm.appendChild(span2);
    var span3 = document.createElement('span');
    span3.innerHTML = '未发布';
    span3.className ='wenjuan-zt';
    newForm.appendChild(span3);
    var bianji = document.createElement('input');
    bianji.type = 'button';
    bianji.value = '编辑';
    bianji.className='BianJi'
    var shanchu = document.createElement('input');
    shanchu.type='button';
    shanchu.value='删除';
    shanchu.className='Delete';
    var chakan=document.createElement('input');
    chakan.type='button';
    chakan.value='查看数据';
    chakan.className='ChaKan'
    newForm.appendChild(bianji);
    newForm.appendChild(shanchu);
    newForm.appendChild(chakan);
    //给每份问卷添加一个form表格，里面用于存放问题和选项
    var data=document.createElement('form');
    data.className='datas';
    data.style.display='none'; //当点击编辑按钮的时候才会显现
    list.appendChild(newForm);
    list.appendChild(data);
    //给所有的删除按钮添加事件

    var Delete = document.querySelectorAll('.Delete');
    for(var i=0;i<Delete.length;i++){
        Delete[i].onclick=function() {
            DeleteBox.style.display='block';
            wenjuanNum--;
            list.removeChild(this.parentNode);
            //调整问卷的份数
            var wenjuanCount = document.querySelectorAll('.wenjuanCount');
            var j=1;
            for(var k=0;k<wenjuanCount.length;k++){
                wenjuanCount[k].innerHTML='这是我的第'+j+'份调查问卷';
                j++;
            }
            numberDelete=i;
        }
    }

    //编辑问卷按钮 （可编辑问题和选项）
    var BianJI = document.querySelectorAll('.BianJi');
    var forms=document.querySelectorAll('.form');
    console.log(forms);

    for(var i=0;i<BianJI.length;i++){
        //给每个问卷的编辑按钮添加事件
        BianJI[i].onclick=function(){
            box3.style.display = 'block';
            list.style.display = 'none';
            box1.style.display = 'none';
            // var datas=document.querySelectorAll('.datas');
            // // list.style.display='none';
            // // forms[i].style.display='none';
            // datas[i].style.display='block';
            // data[i].innerHTML='helloworld';
        }
    }

    //查看数据按钮
    chakan.onclick = function(){
        var chakanbtn = document.querySelector('.chaKanData');
        chakanbtn.style.display = 'block';
        list.style.display='none';
        box1.style.display = 'none';
    }

    //批量删除的总按钮
    var checkboxAll = document.getElementById('checkboxall');
    var checkboxs = document.querySelectorAll('.checkbox1');

    checkboxAll.onclick = function(){
        for(var i=0; i<checkboxs.length;i++){
            checkboxs[i].checked=this.checked;
        }
    }

    //问卷的多选框按钮事件
    for(var i=0;i<checkboxs.length;i++){
        checkboxs[i].onclick = function(){
            //flag控制全选按钮是否选中
            var flag=true;
            //每次点击下面的复选框都要循环检查这些按钮是否全被选中
            for(var i=0;i<checkboxs.length;i++){
                if(!checkboxs[i].checked){
                    flag=false;
                    break; //退出循环
                }
            }
            checkboxAll.checked = flag;
        }
    }
    //点击批量删除按钮事件
    var plDelete = document.querySelector('.plDelete');
    plDelete.onclick = function(){
        var check = document.querySelectorAll('.checkbox1');
        checkboxAll.checked=false;
        for(var i=0;i<check.length;i++){
            //如果复选框的值为true则删除该问卷
            if(check[i].checked){
                list.removeChild(check[i].parentNode);
                wenjuanNum--;
            }
        }
    }
}


//删除问卷按钮
var DeleteBox = document.querySelector('.Delete-box');
// var Delete = document.querySelectorAll('.Delete');
var closebtn = document.querySelector('#close-btn');
// var sure = document.querySelector('#sure');
var notsure = document.querySelector('#not-sure');
var wenJuanZt = document.querySelector('.wenjuan-zt');

//点击右上角的×
closebtn.onclick=function() {
    DeleteBox.style.display='none';
}
//点击确定删除
function sureDelete(){
    DeleteBox.style.display='none';
    wenJuanZt.style.color='black';

}
sure.onclick=sureDelete;
//点击取消删除
notsure.onclick=function() {
    DeleteBox.style.display='none';
}

//发布问卷按钮
var FaBuBox=document.querySelector('.FaBu-box');
var FaBu = document.querySelector('.faBu');
var closebtnFaBu = document.querySelector('#close-btn-fabu');
var sureFaBu = document.querySelector('#sure-fabu');
var notsureFaBu = document.querySelector('#not-sure-fabu');

//点击发布问卷按钮
FaBu.onclick=function(){
    FaBuBox.style.display='block';
}
//点击右上角的×
closebtnFaBu.onclick=function() {
    FaBuBox.style.display='none';
}

//点击取消发布
notsureFaBu.onclick=function() {
    FaBuBox.style.display='none';
}

//点击添加问题跳出单选多选文本选项
var content_detail = document.querySelector('.content-box');
var quetion_button = document.querySelector('.quetion');
var questionNumber=0;
quetion_button.onclick = function() {
    // box3.style.display = 'none';
    // content_detail.style.display = 'block';
    var danxuan = document.createElement('input');
    danxuan.type='button';
    danxuan.value='单选';
    danxuan.className='btn';
    var duoxuan =document.createElement('input');
    duoxuan.type='button';
    duoxuan.value = '多选'
    duoxuan.className='btn';
    var wenben = document.createElement('input');
    wenben.type='button';
    wenben.value = '文本';
    wenben.className='btn';
    var div=document.createElement('div');
    div.className='div-Choose';
    div.appendChild(danxuan);
    div.appendChild(duoxuan);
    div.appendChild(wenben);
    box3.insertBefore(div,quetion_button);
    //设置点击添加问题按钮无效
    quetion_button.onclick = function(){
        null;
    }
    //点击单选多选文本按钮后
    var btns = document.querySelectorAll('.btn');
    //btns[0]代表单选按钮
    btns[0].onclick = function(){
        questionNumber++;
        var div=document.createElement('div');
        div.className='allchoose';
        var hr = document.querySelector('#hr');
        var p = document.createElement('p'); //p标签里放置input type=text 可设置题目 比如你的性别?
        var label = document.createElement('label');

        //输入问题框
        var input = document.createElement('input');
        input.style.width='50vh';
        input.value='Q'+questionNumber;
        p.appendChild(input);

        //设置单选按钮和选项
        var p1 = document.createElement('p');
        var radio1 = document.createElement('input');
        radio1.type='radio';
        radio1.id='r1';
        radio1.name='danxuan';
        var text1 = document.createElement('input');
        text1.type='text';
        p1.appendChild(radio1);
        p1.appendChild(text1);

        var p2 = document.createElement('p');
        var radio2 = document.createElement('input');
        radio2.type='radio';
        radio2.name = 'danxuan';
        var text2 = document.createElement('input');
        text2.type = 'text';
        //将元素添加到盒子中
        p2.appendChild(radio2);
        p2.appendChild(text2);
        div.appendChild(p);
        div.appendChild(p1);
        div.appendChild(p2);
        box3.insertBefore(div,hr);
         //增加盒子高度
        box3.style.height=box3.clientHeight+80+'px';
    }
    //多选题
    btns[1].onclick = function(){
        questionNumber++;
        var div=document.createElement('div');
        div.className='allchoose';
        var hr = document.querySelector('#hr');
        var p = document.createElement('p'); //p标签里放置input type=text 可设置题目 比如你的性别?
        var input = document.createElement('input');
        input.style.width='50vh';
        input.value='Q'+questionNumber;
        p.appendChild(input);
        div.appendChild(p);
        //设置多选按钮和选项
        var p1 = document.createElement('p');
        var radio1 = document.createElement('input');
        radio1.type='checkbox';
        radio1.name='duoxuan';
        var text1 = document.createElement('input');
        text1.type='text';
        p1.appendChild(radio1);
        p1.appendChild(text1);

        var p2 = document.createElement('p');
        var radio2 = document.createElement('input');
        radio2.type='checkbox';
        radio2.name = 'duoxuan';
        var text2 = document.createElement('input');
        text2.type = 'text';
        p2.appendChild(radio2);
        p2.appendChild(text2);

        var p3 = document.createElement('p');
        var radio3 = document.createElement('input');
        radio3.type='checkbox';
        radio3.name = 'duoxuan';
        var text3 = document.createElement('input');
        text3.type = 'text';
        //将元素添加到相应的盒子中
        p3.appendChild(radio3);
        p3.appendChild(text3);
        div.appendChild(p1);
        div.appendChild(p2);
        div.appendChild(p3);
        box3.insertBefore(div,hr);
         //增加盒子高度
        box3.style.height=box3.clientHeight+115+'px';
    }
    //文本题
    btns[2].onclick = function(){
        questionNumber++;
        var div=document.createElement('div');
        div.className='allchoose';
        var hr = document.querySelector('#hr');
        var p = document.createElement('p'); //p标签里放置input type=text 可设置题目 比如你的性别?
        var input = document.createElement('input');
        input.style.width='50vh';
        input.value='Q'+questionNumber;
        p.appendChild(input);
        div.appendChild(p);
        var textarea = document.createElement('textarea'); //textare作答区域
        textarea.style.marginLeft='5vh';
        textarea.cols= 50;
        textarea.rows = 3;
        div.appendChild(textarea);
        box3.insertBefore(div,hr);
        //增加盒子高度
        box3.style.height=box3.clientHeight+75+'px';
    }

    //点击确定发布
    sureFaBu.onclick=function() {

        box3.style.display='none';
        FaBuBox.style.display='none';
        list.style.display='block';
        box1.style.display='block';
        // wenJuanZt.textContent="已发布";
        // wenJuanZt.style.color='#00ff00';
        var wenjuanzt = document.querySelectorAll('.wenjuan-zt');
        for(var i=0;i<wenjuanzt.length;i++){
            wenjuanzt[i].innerHTML = '已发布';
            wenjuanzt[i].style.color='#00ff00';
        }
        var div_choose = document.querySelector('.div-Choose');
        var allchose = document.querySelectorAll('.allchoose');
        box3.removeChild(div_choose);
        for(var i=0;i<allchose.length;i++){
            box3.removeChild(allchose[i]);
        }
        box3.style.height='200px';
    }
}


//查看数据的返回按钮
var fanhuis = document.querySelectorAll('.fanhui');
for(var i=0;i<fanhuis.length;i++){
    fanhuis[i].onclick = function(){
        var chakanda = document.querySelector('.chaKanData');
        chakanda.style.display = 'none';
        list.style.display = 'block';
        box1.style.display = 'block';
    }
}

